<template>
    <div class="main">
        <top-bar></top-bar>
        <div class="main-mains w90">
            <div class="main-mains-l">
                <router-link to="/main">
                    <div class="main-mains-l-return">
                        <span>←</span>
                        返回首页
                    </div>
                </router-link>
                <router-link to="/member1/1">
                    <div>查看党群服务</div>
                </router-link>
                <div class="active">查看物业服务</div>
                <router-link to="/member3/1">
                    <div>查看寻求帮助</div>
                </router-link>
                <router-link to="/member4">
                    <div>查看其他服务</div>
                </router-link>
            </div>
            <div class="main-mains-r">
                <div class="main-mains-table">
                    <div class="member-top clear">
                        <router-link to="/member2/1">
                            <div :class="{fl:1,active:this.$route.params.type==1}" @click="changeType(1)">物业报修</div>
                        </router-link>
                        <router-link to="/member2/2">
                            <div :class="{fl:1,active:this.$route.params.type==2}" @click="changeType(2)">宿舍托管</div>
                        </router-link>
                    </div>
                    <div class="main-mains-list" v-show='dataFlag'>
                        <ul v-show="type==1">
                            <li class="clear" v-for="(item,index) in dataList" :key="index">
                                <router-link :to="'/memberDetails/3/' + item.id">
                                    <div>{{item.personName}}的物业报修 <span class="time">{{item.createtime}}</span></div>
                                </router-link>
                            </li>
                        </ul>
                        <ul v-show="type==2">
                            <li class="clear" v-for="(item,index) in dataList" :key="index">
                                <router-link :to="'/memberDetails/4/' + item.id">
                                    <div>{{item.personName}}的宿舍托管 <span class="time">{{item.createtime}}</span></div>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="main-pages" v-show='dataFlag'>
                        <el-pagination background @current-change="changePage" :page-size='15' layout="prev, pager, next" :total="totalNum">
                        </el-pagination>
                    </div>
                    <div class="down-excle" v-show='dataFlag' @click="downExcle()">下载Excel表格</div>
                </div>
                <div class="main-mains-none" v-show='!dataFlag'>
                    <img src="../../../static/images/none.png" alt=""><br>
                    <div>暂无记录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../public/top";
export default {
  components: {
    topBar
  },
  data() {
    return {
      type: this.$route.params.type,
      dataList: [],
      dataFlag: false,
      totalNum: 1,
      pages: 1
    };
  },
  methods: {
    downExcle() {
      if (this.type == 1) {
        window.open(
          this.urls +
            "/membership/export" +
            "?code=property_warranty" +
            "&PageSize=15&startPage=" +
            this.pages
        );
      } else {
        window.open(
          this.urls +
            "/membership/export" +
            "?code=dormitory_application" +
            "&PageSize=15&startPage=" +
            this.pages
        );
      }
    },
    changePage(val) {
      this.pages = val;
      if (this.type == 1) {
        this.getData("property_warranty");
      } else {
        this.getData("dormitory_application");
      }
    },
    changeType(num) {
      this.type = num;
      if (this.type == 1) {
        this.getData("property_warranty");
      } else {
        this.getData("dormitory_application");
      }
    },
    getData(codes) {
      let _this = this;
      _this.dataFlag = false;
      _this
        .$http({
          url:
            _this.urls +
            "/membership/list.do" +
            "?code=" +
            codes +
            "&PageSize=15&startPage=" +
            _this.pages,
          method: "get"
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.dataList = data.data.list;
            _this.totalNum = data.data.total;
            if (data.data.total) {
              _this.dataFlag = true;
            }
          } else {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    console.log(this.type);
    // 1物业报修  2宿舍申请
    if (this.type == 1) {
      this.getData("property_warranty");
    } else {
      this.getData("dormitory_application");
    }
  }
};
</script>

<style lang="less" scoped>
@import "member.less";
</style>

